<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的基本使用</title>
</head>
<script src="../js/vue.js"></script>
<body>
    <!--    
        事件的基本使用：
            1.使用v-on:xxx或者@xxx绑定事件，其中xxx是事件名，不需要加on
            2.事件的回调函数，通过methods选项定义，最终会在vm上
            3.methods中定义的函数，不要使用箭头函数，否则this指向会出问题，会指向Windows
            4.methods中定义的函数，都是被Vue管理的函数，this的指向是vm活组件实例对象
            5.@click="demo"和@click="demo($event)"效果一致，但后者可以传参
    
    -->
    <div id="app">
        <h1>{{msg}}</h1>
        <button v-on:click="showInfo1">点击我更改信息1不传参</button>
        <button @click="showInfo2(3,$event)">点击我更改信息2传参</button>
    </div>
</body>
<script>
     new Vue({
        el: '#app',
        data: {
            msg: '欢迎来到事件处理'
        },
        methods: {
            showInfo1() {
                alert("成功跳转！")
            },
            showInfo2(number,event) {
                console.log(this)//this指向Vue实例
                console.log(event.target.innerText)
                alert("成功跳转！"+number)
            }
        }
    })
</script>
</html>